﻿<div class="container-fluid">
    <div class="row px-3">
        <div class="col-md-6 col-lg-4 p-3">
            <RadzenCard>
                <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Default TextBox</RadzenText>
                <RadzenTextBox Change=@(args => OnChange(args, "TextBox")) class="w-100" />
            </RadzenCard>
        </div>
        <div class="col-md-6 col-lg-4 p-3">
            <RadzenCard>
                <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Placeholder</RadzenText>
                <RadzenTextBox Placeholder="Search..." Change=@(args => OnChange(args, "TextBox with placeholder")) class="w-100" />
            </RadzenCard>
        </div>
        <div class="col-md-6 col-lg-4 p-3">
            <RadzenCard>
                <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">5 characters maximum</RadzenText>
                <RadzenTextBox @bind-Value=@value MaxLength="5" Change=@(args => OnChange(args, "TextBox with 5 maximum characters")) class="w-100" />
            </RadzenCard>
        </div>
        <div class="col-md-6 col-lg-4 p-3">
            <RadzenCard>
                <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Change on every input</RadzenText>
                <RadzenTextBox @oninput=@(args => OnChange(args.Value.ToString(), "TextBox with change on every input")) class="w-100" />
            </RadzenCard>
        </div>
        <div class="col-md-6 col-lg-4 p-3">
            <RadzenCard>
                <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Disabled TextBox</RadzenText>
                <RadzenTextBox Disabled="true" class="w-100" />
            </RadzenCard>
        </div>
    </div>
</div>

<EventConsole @ref=@console />

@code {
    string value;

    EventConsole console;

    void OnChange(string value, string name)
    {
        console.Log($"{name} value changed to {value}");
    }
}